<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>米事见 - 热点舆情监测平台</title>
    <meta content="Responsive admin theme build on top of Bootstrap 4" name="description">

    <link href="static/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <!--Chartist Chart CSS -->
    <!-- <link rel="stylesheet" href="static/css/chartist.min.css"> -->

    <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="static/css/metismenu.min.css" rel="stylesheet" type="text/css">
    <link href="static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="static/css/style.css" rel="stylesheet" type="text/css">

    

    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://api.map.baidu.com/api?v=3.0&ak=A87Ac2wJCaxXEZ5SdRna1SDFRygWz2je"></script>

</head>

<body>

    <div class="header-bg">
        <!-- Navigation Bar-->
        <header id="topnav">
            <div class="topbar-main">
                <div class="container-fluid">

                    <!-- Logo-->
                    <div>
                        <a href="#" class="logo">
                            <img src="static/picture/logo-mi.png" class="logo-lg" alt="" height="60">
                        </a>
                    </div>
                    <!-- End Logo-->

                    <div class="menu-extras topbar-custom navbar p-0">

                        <!-- Search input -->
                        <div class="search-wrap" id="search-wrap">
                            <div class="search-bar">
                                <input class="search-input" type="search" placeholder="Search">
                                <a href="#" class="close-search toggle-search" data-target="#search-wrap">
                                    <i class="mdi mdi-close-circle"></i>
                                </a>
                            </div>
                        </div>

                        <ul class="navbar-right ml-auto list-inline float-right mb-0">

                            <!-- full screen -->
                            <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                                <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                    <i class="fas fa-expand noti-icon"></i>
                                </a>
                            </li>

                          

                            <li class="dropdown notification-list list-inline-item">
                                <div class="dropdown notification-list nav-pro-img">
                                    <a class="dropdown-toggle nav-link arrow-none waves-effect nav-user" href="http://localhost:3000" role="button" aria-haspopup="false" aria-expanded="false">
                                        <img src="static\picture\ai.png" alt="user" class="rounded-circle">
                                    </a>
                                </div>
                            </li>

                            <li class="menu-item dropdown notification-list list-inline-item">
                                <!-- Mobile menu toggle-->
                                <a class="navbar-toggle nav-link">
                                    <div class="lines">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                </a>
                                <!-- End mobile menu toggle-->
                            </li>

                        </ul>

                    </div>
                    <!-- end menu-extras -->

                    <div class="clearfix"></div>

                </div>
                <!-- end container -->
            </div>
            <!-- end topbar-main -->

            <!-- start content -->
            <div class="bg-dark">
                <div class="container-fluid">
                    <div class="row align-items-center ">
                        <div class="col-md-8">
                            <div class="page-title-box">
                                <h4 class="page-title">用户分析 </h4>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">
                                        <a href="javascript:void(0);">首页</a>
                                    </li>
                                    <li class="breadcrumb-item">
                                        <a href="javascript:void(0);">内容分析</a>
                                    </li>
                                    <li class="breadcrumb-item active">用户分析</li>
                                </ol>
                            </div>
                        </div>

                        <div class="col-md-4 d-flex flex-row">
                            <div class="col-md-6 align-self-center" style="color:aliceblue">
                                <h6>查询每日详情:</h6>
                            </div>
                            <div class="float-right d-none d-md-block app-datepicker ml-auto">
                                <input type="text" class="form-control" data-date-format="MM dd, yyyy" readonly="readonly" id="datepicker">
                                <i class="mdi mdi-chevron-down mdi-drop"></i>
                            </div>
                        </div>
                    </div>

                    <div class="row top-content">
                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">话题总数</h5>
                                    <h4 class="text-info pt-1 mb-0"><div id="count_contents"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart1"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">评论总数</h5>
                                    <h4 class="text-warning pt-1 mb-0"><div id="count_comment"></div></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart2"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">转发总数</h5>
                                    <h4 class="text-primary pt-1 mb-0"><div id="count_repost"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart3"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">

                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">点赞总数</h5>
                                    <h4 class="text-danger pt-1 mb-0"><div id="count_like"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart4"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end content -->

            <!-- MENU Start -->
            <div class="navbar-custom">
                <div class="container-fluid">

                    <div id="navigation">

                        <!-- Navigation Menu-->
                        <ul class="navigation-menu">

                            <li class="has-submenu">
                                <a href="index.html"><i class="dripicons-meter"></i> 首页</a>
                            </li>

                            <li class="has-submenu">
                                <a href="contents.html"><i class="dripicons-briefcase"></i> 内容分析</a>
                                <ul class="submenu">
                                            <li><a href="contents.html">帖子</a></li>
                                            <li><a href="topicresearch.html">话题</a></li>
                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="blogger.html"><i class="dripicons-broadcast"></i> 权威博主</a>
                                <!-- <ul class="submenu">
                                            <li><a href="blogger.html">权威博主</a></li>
                                            <li><a href="sentiment-graph.html">舆情拓扑</a></li>
                                </ul> -->
                            </li>

                            <li class="has-submenu">
                                <a href="user.html"><i class="dripicons-view-thumb"></i> 用户分析</a>
                                <!-- <ul class="submenu">
                                            <li><a href="user.html">用户分析</a></li>
                                            <li><a href="#">暂无</a></li>
                                            <li><a href="#">暂无</a></li>
                                </ul> -->
                            </li>
                        </ul>
                        <!-- End navigation menu -->
                    </div>
                    <!-- end #navigation -->
                </div>
                <!-- end container -->
            </div>
            <!-- end navbar-custom -->
        </header>
        <!-- End Navigation Bar-->

    </div>
    <!-- header-bg -->

    <div class="wrapper">
        <div class="container-fluid">

            

            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body">

                            <h4 class="mt-0 header-title">用户活跃度曲线</h4>
                            <p class="sub-title d-inline-block text-truncate w-100">展示用户每日发帖量变化</p>

                            <ul class="list-inline widget-chart mt-4 mb-3 text-center">
                            
                                <div id="monthly-total" style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); text-align: center;">
                                    <h3 style="font-size: 20px; font-weight: bold;">各月活跃度</h3>
                                    <div id="monthly-total-list" style="width:500px;display: flex; flex-wrap: wrap; justify-content: space-around;">
                                        <!-- 每月数据将在这里动态渲染 -->
                                    </div>
                                </div>
                            
                            </ul>

                            <div id="active" style="width: 800px;height:400px;margin-top: 100px ;margin-left: 300px;"></div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row sub-title">
                <div class="col-md-12">
                    <h2 style="font-size: 25px;">用户情绪概览</h2>
                </div>
            </div>
                        
            <div class="row">
                <div class="col-xl-6">
                    <div class="card">
                        <div class="card-body">

                            <h4 class="mt-0 header-title">情绪分布饼图</h4>
                            <p class="sub-title d-inline-block text-truncate w-100">展示用户帖子评论中的总体感情趋向
                            </p>

                        

                            <div id="pieChart" style="width: 100%; height: 380px;"></div>

                        </div>
                    </div>
                </div>
                <!-- end col -->

                <div class="col-xl-6">
                    <div class="card">
                        <div class="card-body" >

                            <h4 class="mt-0 header-title">情绪关键词频</h4>
                            <p class="sub-title d-inline-block text-truncate w-100">在所有评论帖子中各情绪关键词出现频率
                            </p>

                            <div id="heatmapChart" style="width: 100%; height: 380px;margin-top: 0px;"></div>

                        </div>
                    </div>
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->
            <div class="row sub-title">
                <div class="col-md-12">
                    <h2 style="font-size: 25px;">用户画像</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-6">
                    <div class="card">
                        <div class="card-body">

                            <h4 class="mt-0 header-title">地区分布</h4>
                            <p class="sub-title d-inline-block text-truncate w-100"></p>

                            <div id="map" style="width: 600px; height: 400px;"></div>

                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="card">
                        <div class="card-body">
                            

                            <h4 class="mt-0 header-title">用户标签分布</h4>
                            <p class="sub-title d-inline-block text-truncate w-100">热点话题下用户的分类</p>
                            <div id="heatmapContainer" style="width: 600px; height: 370px;"></div>
                        </div>
                    </div>
                </div>
                <!-- end col -->
            </div>
            <div class="row">
                <div class="col-xl-6">
                    <div class="card">
                        <div class="card-body">

                            <h4 class="mt-0 header-title">年龄分布</h4>
                            <p class="sub-title d-inline-block text-truncate w-100"></p>

                            <div id="main" style="width: 100%;height:400px;"></div>

                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="card">
                        <div class="card-body">
                            

                            <h4 class="mt-0 header-title">男女占比</h4>
                            <p class="sub-title d-inline-block text-truncate w-100"></p>

                            <ul class="list-inline widget-chart mt-4 mb-3 text-center">
                                
                            </ul>

                            <div id="gender" style="width: 100%;height:380px;"></div>
                        </div>
                    </div>
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->

            <div class="row">

                <!-- end col -->
            </div>

        </div>
        <!-- end container-fluid -->
    </div>
    <!-- end wrapper -->

    <!-- Footer -->
    <!-- <footer class="footer">
        Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
    </footer> -->

    <!-- End Footer -->

    <!-- jQuery  -->
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.bundle.min.js"></script>
    <script src="static/js/jquery.slimscroll.js"></script>
    <script src="static/js/waves.min.js"></script>

    <script src="static/js/apexcharts.min.js"></script>
    <script src="static/js/bootstrap-datepicker.min.js"></script>
    <!--Chartist Chart-->
    <!-- <script src="static/js/chartist.min.js"></script>
    <script src="static/js/chartist-plugin-tooltip.min.js"></script>
    <script src="static/js/chartist.init.js"></script> -->

    <!-- App js -->
    <script src="static/js/app.js"></script>

    <script src="static/js/axios.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
    // 找到日期选择器的元素
    const datepickerInput = document.getElementById('datepicker');

    // 设置日期为5月8日
    datepickerInput.value = 'May 08, 2024'; // 根据你的日期格式进行设置

    // 初始化日期选择器
    $(datepickerInput).datepicker({
        autoclose: true,
        todayHighlight: true,
        format: 'MM dd, yyyy' // 日期格式要与显示格式一致
    });

    // 加载5月8日对应的数据
    loadData('2024-05-08');

    // 监听日期选择变化事件
    $(datepickerInput).on('changeDate', function(e) {
        const selectedDate = e.format('yyyy-mm-dd'); // 获取选择的日期
        loadData(selectedDate); // 加载新日期对应的数据
    });
});
        // const countDate = '2024-05-08'
        document.addEventListener("DOMContentLoaded", function() {
    const datepickerInput = document.getElementById('datepicker');
    
    // 初始化日期选择器
    $(datepickerInput).datepicker({
        autoclose: true,
        todayHighlight: true,
        format: 'yyyy-mm-dd' // 日期格式要与后端API期望的格式一致
    });
    
    // 获取默认日期
    // const defaultDate = getDefaultDate();
    const defaultDate = '2024-05-08';
    
    // 加载默认日期对应的数据
    loadData(defaultDate);
    
    // 监听日期选择变化事件
    $(datepickerInput).on('changeDate', function(e) {
        const selectedDate = e.format('yyyy-mm-dd'); // 获取选择的日期
        loadData(selectedDate); // 加载新日期对应的数据
    });
    
    // 获取默认日期的函数
    function getDefaultDate() {
        const today = new Date();
        const year = today.getFullYear();
        const month = (today.getMonth() + 1).toString().padStart(2, '0'); // 月份补零
        const day = today.getDate().toString().padStart(2, '0'); // 日补零
        return `${year}-${month}-${day}`;
    }
    
    // 加载数据的函数
    function loadData(date) {
        const apiUrl = `http://localhost:8080/hot/countlist?Date=${date}`;
    
        // 发起GET请求获取数据
        axios.get(apiUrl)
            .then(response => {
                const countList = response.data[0];
    
                // 更新页面上对应的数据显示
                updateDataDisplay(countList);
            })
            .catch(error => {
                console.error('Error fetching data:', error);
                // 处理请求错误
                const emptyData = {
                    count_comment: 0,
                    count_repost: 0,
                    count_like: 0,
                    count_contents: 0
                };
                updateDataDisplay(emptyData);
            });
    }
    
    // 更新数据显示的函数
    function updateDataDisplay(data) {
        const commentElement = document.getElementById('count_comment');
        const repostElement = document.getElementById('count_repost');
        const likeElement = document.getElementById('count_like');
        const contentsElement = document.getElementById('count_contents');
    
        commentElement.innerText = data.count_comment || 0;
        repostElement.innerText = data.count_repost || 0;
        likeElement.innerText = data.count_like || 0;
        contentsElement.innerText = data.count_contents || 0;
    }
    });
    
    </script>
    
    <script>
      axios.get('http://localhost:8080/useranalysis/ip')
    .then(function (response) {
        var data = response.data;
        var processedData = data.map(item => ({ value: item.ip_count, name: item.ip }));
        console.log('处理后的数据:', processedData);

        var mapChart = echarts.init(document.getElementById('map'));
        mapChart.showLoading();

        $.get('https://cdn.jsdelivr.net/npm/echarts/map/json/china.json', function (chinaJson) {
            echarts.registerMap('china', chinaJson);
            
            mapChart.hideLoading();

            var option = {
                title: {
                    text: '数据展示',
                    subtext: '详情',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return params.name + '<br/>IP数量: ' + params.value;
                    }
                },
                visualMap: {
                    min: 0,
                    max: 100,
                    left: 'left',
                    top: 'bottom',
                    text: ['High', 'Low'],
                    calculable: true
                },
                series: [
                    {
                        name: '数据',
                        type: 'map',
                        map: 'china',
                        roam: true,
                        label: {
                            show: true, // 省份名称一直显示
                            fontSize: 12,
                            color: '#333'
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#FFD700', // 渐变色填充地图区域
                                borderColor: '#fff', // 地图边界颜色
                                borderWidth: 1
                            },
                            emphasis: {
                                label: { show: true },
                                areaColor: '#FFA500' // 高亮时的颜色
                            }
                        },
                        data: processedData
                    }
                ]
            };

            mapChart.setOption(option);

            var dataIndex = 0;
            var colors = ['#FF0000', '#00FF00', '#0000FF'];
            var colorIndex = 0;
            setInterval(function () {
                var color = colors[colorIndex % colors.length];
                mapChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: dataIndex,
                    color: color
                });

                setTimeout(function () {
                    mapChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: dataIndex
                    });
                    dataIndex = (dataIndex + 1) % processedData.length;
                    colorIndex++;
                }, 500);
            }, 1500);

        });
    })
    .catch(function (error) {
        console.log(error);
    });

    </script>
    <script>
        axios.get('http://localhost:8080/useranalysis/label')
        .then(function(response){
        var heatmapChart = echarts.init(document.getElementById('heatmapContainer'));
        var data = response.data; // 获取到用户标签数据
        
         // 随机选择20个数据
         var selectedData = [];
        while (selectedData.length < 20) {
            var randomIndex = Math.floor(Math.random() * data.length);
            if (!selectedData.includes(data[randomIndex])) {
                selectedData.push(data[randomIndex]);
            }
        }
        
        // 将随机选择的数据进行 map 操作
        var mappedData = selectedData.map(item => [item.user_type, item.label_count]);
        
        // 这里使用 mappedData 替换原来的 data
        data = mappedData;
            
        
        // 构建固定的热力图数据格式，但仅使用实际数据，确保固定4行5列
        var heatmapData = [];
        var rowCount = Math.min(data.length, 4); // 最多4行
        var columnCount = 5; // 固定5列
        
        // 将实际数据填充到 heatmapData 中，确保不超出4行5列的范围
        for (var i = 0; i < rowCount; i++) {
            for (var j = 0; j < columnCount; j++) {
                if (i * columnCount + j < data.length) {
                    heatmapData.push([j, i, data[i * columnCount + j][1]]);
                }
            }
        }
        
        // 设置热力图配置项
        var option = {
            tooltip: {
                position: 'top'
            },
            grid: {
                height: '80%', // 调整高度，确保不会挡住标签
                top: '5%', // 调整位置，让热力图处于容器中间
                left: '10%', // 调整位置，让热力图处于容器中间
                right: '10%' // 调整位置，让热力图处于容器中间
            },
            xAxis: {
                type: 'category',
                data: ['列1', '列2', '列3', '列4', '列5'], // 固定5列
                show: false
            },
            yAxis: {
                type: 'category',
                data: data.slice(0, rowCount).map(item => item[0]), // 仅显示实际数据对应的标签
                show: false
            },
            visualMap: {
                show: false
            },
            series: [{
                name: '用户标签热力图',
                type: 'heatmap',
                data: heatmapData,
                label: {
                    show: true,
                    position: 'inside',
                    formatter: function(params) {
                        var yIndex = params.data[1]; // 获取 y 轴坐标对应的索引
                        return data[yIndex * columnCount + params.data[0]][0]; // 返回对应索引的标签信息
                    }
                }
            }]
        };
        
        // 使用配置项和数据显示热力图
        heatmapChart.setOption(option);
    })
            .catch(function (error) {
                console.log(error);
            });
    </script>

<script>
    axios.get('http://localhost:8080/useranalysis/gender')
    .then(function(response){
    var genderChart = echarts.init(document.getElementById('gender'));
    var data = response.data
    // 格式化数据为 ECharts 饼图所需的格式
    var formattedData = data.map(item => ({ value: item.gender_count, name: item.gender }));

    var option = {
        title : {
            text: '性别占比',
            subtext: '示例数据',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: data.map(item => item.gender) // 使用获取的性别数据作为图例
        },
        series: [
        {
            name: '性别占比',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: formattedData,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                color: function(params) {
                    // 根据数据项的索引返回不同的颜色
                    var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
                    return colorList[params.dataIndex];
                }
            }
        }
    ]
    };

    genderChart.setOption(option);
})
            .catch(function (error) {
                console.log(error);
            });
</script>

<script>
    axios.get('http://localhost:8080/useranalysis/age')
    .then(function(response){
        var myChart = echarts.init(document.getElementById('main'));
        var data = response.data;

        var ageCategories = ['0-20', '21-30', '31-40', '41-50', '51+'];
        var ageCounts = [0, 0, 0, 0, 0]; // 初始化年龄计数数组

        // 遍历数据，将年龄计数添加到相应的年龄区间
        data.forEach(function(entry) {
            var age = entry.age;
            var count = entry.age_count;

            if (age >= 0 && age <= 20) {
                ageCounts[0] += count;
            } else if (age >= 21 && age <= 30) {
                ageCounts[1] += count;
            } else if (age >= 31 && age <= 40) {
                ageCounts[2] += count;
            } else if (age >= 41 && age <= 50) {
                ageCounts[3] += count;
            } else {
                ageCounts[4] += count;
            }
        });

        var option = {
            title: {
                text: '年龄分布',
                textStyle: {
                    color: '#333',
                    fontSize: 24,
                    fontWeight: 'bold'
                },
                x: 'center',
            },
            xAxis: {
                type: 'category',
                data: ageCategories,
                axisLabel: {
                    fontSize: 16
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    fontSize: 16
                }
            },
            series: [{
                data: ageCounts,
                type: 'bar',
                itemStyle: {
                    color: '#f3a694'
                }
            }]
        };

        myChart.setOption(option);
    })
    .catch(function (error) {
        console.log(error);
    });
</script>
  

<script>
    const fetchData = async () => {
        try {
            const response = await axios.get('http://localhost:8080/useranalysis/words');
            const data = response.data;

            const randomData = [];
            while (randomData.length < 10) {
                const randomIndex = Math.floor(Math.random() * data.length);
                randomData.push(data[randomIndex]);
                data.splice(randomIndex, 1);
            }

            randomData.sort((a, b) => b.acount - a.acount);

            const heatmapChart = echarts.init(document.getElementById('heatmapChart'));
            const option = {
                tooltip: {
                    position: 'top'
                },
                xAxis: {
                    type: 'category',
                    data: randomData.map(item => item.sentimentwords),
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['情感词汇'],
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: Math.max(...randomData.map(item => item.acount)),
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%',
                    inRange: {
                        color: ['#d7dbf7', '#5470c6']
                    }
                },
                series: [{
                    name: '情绪词词频',
                    type: 'heatmap',
                    data: randomData.map(item => ([randomData.indexOf(item), 0, item.acount])),
                    label: {
                        show: true
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }],
                graphic: [{
                    type: 'rect',
                    left: '90%',
                    top: '5%',
                    shape: {
                        width: 50,
                        height: 30
                    },
                    style: {
                        fill: '#5470c6',
                        text: '刷新',
                        textFill: '#fff',
                        textFont: '14px Microsoft YaHei',
                        textAlign: 'center',
                        textVerticalAlign: 'middle',
                        cursor: 'pointer'
                    },
                    onclick: fetchData
                }]
            };
            heatmapChart.setOption(option);
        } catch (error) {
            console.error(error);
        }
    };

    fetchData();
</script>

<!-- 用户活跃度数据展示 -->
<script>
    axios.get('http://localhost:8080/useranalysis/active')
     .then(function (response) {
         const activeData = response.data; 
         const dates = activeData.map(item => item.date); 
         const activeacount = activeData.map(item => item.activeacount);
 
         var activeChart = echarts.init(document.getElementById('active'));
 
         var option = {
             title: {
                 text: '用户每日活跃度曲线',
                 textStyle: {
                     color: '#333',
                     fontSize: 20,
                     fontWeight: 'bold'
                 },
                 x: 'center',
             },
             xAxis: {
                 type: 'category',
                 data:dates.slice(0, 10), // 初始展示最近的 10 天数据, // 将dates数据放入x轴
                 axisLine: {
                     lineStyle: {
                         color: '#999'
                     }
                 },
                 axisLabel: {
                     color: '#666',
                     fontSize: 14,
                     interval: 0, // 设置日期每天都显示
                     rotate: 45, // 调整标签文字倾斜角度为 -45 度
                 }
             },
             yAxis: {
                 type: 'value',
                 axisLine: {
                     lineStyle: {
                         color: '#999'
                     }
                 },
                 axisLabel: {
                     color: '#666',
                     fontSize: 14
                 }
             },
             series: [{
                 data: activeacount.slice(0, 10), // 初始展示最近的 10 天数据
                 type: 'line',
                 lineStyle: {
                     color: {
                         type: 'linear',
                         x: 0,
                         y: 0,
                         x2: 0,
                         y2: 1,
                         colorStops: [{
                             offset: 0, color: '#4caf50' // 0% 处的颜色
                         }, {
                             offset: 1, color: '#00bcd4' // 100% 处的颜色
                         }],
                         global: false
                     },
                     width: 2
                 },
                 itemStyle: {
                     color: '#4caf50'
                 },
                 areaStyle: {
                     color: {
                         type: 'linear',
                         x: 0,
                         y: 0,
                         x2: 0,
                         y2: 1,
                         colorStops: [{
                             offset: 0, color: '#4caf50'
                         }, {
                             offset: 1, color: '#00bcd4'
                         }],
                         global: false
                     }
                 }
             }],
             grid: {
                 left: '3%',
                 right: '4%',
                 bottom: '3%',
                 containLabel: true
             }
         };
 
         activeChart.setOption(option); // 更新echarts图表数据

           // Calculate monthly total
           const monthlyTotals = activeData.reduce((acc, item) => {
                const month = item.date.split('-')[1];
                acc[month] = (acc[month] || 0) + item.activeacount;
                return acc;
            }, {});

            // Display monthly total
            var monthlyTotalDiv = document.createElement('div');
            monthlyTotalDiv.innerHTML = '<h3>每月数量总和</h3>';
            Object.keys(monthlyTotals).forEach(month => {
                monthlyTotalDiv.innerHTML += `<p>${month} 月: ${monthlyTotals[month]}</p>`;
            });
            var monthlyTotalList = document.getElementById('monthly-total-list');

Object.keys(monthlyTotals).forEach(month => {
    var monthlyTotalItem = document.createElement('div');
    monthlyTotalItem.style.width = '80px'; /* 设置每个月份项的宽度 */
    monthlyTotalItem.style.margin = '10px'; /* 设置月份项之间的间距 */
    monthlyTotalItem.style.padding = '10px'; /* 设置内边距 */
    monthlyTotalItem.style.border = '1px solid #dddddd'; /* 设置边框 */
    monthlyTotalItem.style.borderRadius = '5px'; /* 设置圆角 */
    monthlyTotalItem.style.textAlign = 'center'; /* 设置文本居中 */
    monthlyTotalItem.innerHTML = `<p style="margin: 5px;">${month} 月: ${monthlyTotals[month]}</p>`;
    monthlyTotalList.appendChild(monthlyTotalItem);
});
 
         var currentIndex = 10;
 var displayDataCount = 10; // 设置同时显示的数据条数
 var isHovering = false;
 
 activeChart.getZr().on('mousemove', function (params) {
     isHovering = true;
 });
 
 activeChart.getZr().on('mouseout', function (params) {
     isHovering = false;
 });
 
 setInterval(function () {
     if (!isHovering) {
         var newData = [];
         for (var i = currentIndex - displayDataCount; i < currentIndex; i++) {
             newData.push({
                 date: dates[i % dates.length],
                 activeacount: activeacount[i % dates.length]
             });
         }
 
         activeChart.setOption({
             xAxis: {
                 data: newData.map(item => item.date)
             },
             series: [{
                 data: newData.map(item => item.activeacount)
             }],
             tooltip: {
                 trigger: 'axis',
                 axisPointer: {
                     type: 'line',
                     label: {
                         show: true,
                         precision: 0,
                         formatter: function (params) {
                             return params.value;
                         }
                     }
                 }
             }
         });
 
         currentIndex++;
         if (currentIndex >= dates.length + displayDataCount) {
             currentIndex = displayDataCount;
         }
     }
 }, 1500); // 每隔1.5秒更新一次
     })
     .catch(function (error) {
         console.log(error);
     });
     </script>


<!-- 用户情感分析数据获取 -->
<script>
    axios.get('http://localhost:8080/useranalysis/analysis')
     .then(function (response) {
         var data = response.data;
         console.log('chu处理后的数据:', data);
         var total = data.reduce((acc, curr) => acc + curr.count, 0);
         
         data.forEach(function(item) {
             item.percent = ((item.count / total) * 100).toFixed(2) + '%';
         });
         
         var pieChart = echarts.init(document.getElementById('pieChart'));
         
         var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}:{c}'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: data.map(item => item.sentiment)
            },
            series: [
                {
                    name: '情感分析',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data.map(item => ({ value: item.count, name: item.sentiment }))
                }
            ]
         };
         
         pieChart.setOption(option);
     })
     .catch(function (error) {
         console.log(error);
     });
     </script>
</body>

</html>